<template>
  <view class="corporateManagement">
    <head-box></head-box>
    <view class="tab-botton">
      <view class="corporateManagement-bgs">
        <image src="/static/enterprise/enterprise-2.png"></image>
        <view class="corporateManagement-content">
          <view class="corporateManagement-content-name">
            <text  class="abc">{{enterprise.name}}</text>
          </view>
          <view class="corporateManagement-content-more">
            负责人：<text  class="abc1">{{enterprise.responsible}}</text>  <text class="num">  员工人数：<text  class="abc1">{{enterprise.count}}</text></text>
          </view>
        </view>
      </view>
      <view class="corporateManagement-datas">
        <view class="search-data">
          <image
              class="search-icon"
              src="/static/img/search-icon.png"
              mode=""
              @click="confirm"
          ></image>
          <u-input
              placeholder="请输入搜索关键词"
              placeholder-style="{ opacity: 0.6,width: '600rpx',fontSize: '28rpx',fontFamily: 'PingFang',fontWeight: 500,color: '#888888',lineHeight: '40rpx', paddingRight:'43rpx', textIndent:'36rpx'}"
              :custom-style="{
              background: type==='a'?'#fff':'rgb(242, 242, 242)',
               width: '250rpx',
                fontSize: '28rpx',
                fontFamily: 'PingFang',
                fontWeight: 500,
                color: '#9E9E9E',
                'text-indent':'108rpx',
                height: '72rpx',
borderRadius: '36rpx',
            }"
              border-color="#fff"
              height="41rpx"
              v-model="enterprise.search"
              @clear="onClear"
              @confirm="confirm"
          />

        </view>
        <corporateManagements :list="list" @select="onSelectClick"></corporateManagements>
        <u-loadmore :status="status" :icon-type="iconType" @loadmore="loadmore" />
        <view class="add flex">
          <u-button type="primary" hover-class="none" :custom-style="customStyle0"
          @click="$api.handleMenu('/pages/legalPersonChoosesUsers/legalPersonChoosesUsers')"
          >
            <text>添加</text>
          </u-button>
          <u-button type="primary" hover-class="none" :custom-style="customStyle1"
           :disabled="isListDisabled"
                    @click="onDel"
          >
            <text>删除</text>
          </u-button>
        </view>
      </view>
    </view>
    <tabs-box></tabs-box>
  </view>
</template>

<script>
const btnColor ={
  width: '189rpx',
  height: '58rpx',
  borderRadius: '29rpx',
}//按钮共用部分样式
import corporateManagements from '@/components/corporateManagements'
import { group1 } from '@/mixins/group-1'

import { batchdeleteUsercommember,getUsercommemberList,getUsercommember} from '@/api/usercommember'
export default {
 props:{
   //样式类型
   type: {
     type: String,
     default () {
       return ''
     }
   },
 },
  components:{
    corporateManagements
  },
  mixins:[group1],
  data() {
    return {
      customStyle0: {
     ...btnColor,
        background: 'linear-gradient(0deg, #0065FD, #5F86FF)',

      }, //添加按钮样式
      customStyle1: {
        ...btnColor,
        background: ' linear-gradient(0deg, #FD0000, #FF5F5F)',
      }, //删除按钮样式
      //公司相关信息
      enterprise:{
        checked:[],//是否可以选择
        name:'',//公司名称
        responsible:'',//负责人
        count:0,//人数
        search:'',//要搜索的内容
      },

    };
  },
  mounted() {
    //企业成员管理-获取企业信息
    getUsercommember().then(res=>{
      const {code,result:{count,usercomName,usergpinfoapplyContract}} = res
      this.enterprise.name=usercomName //企业名
      this.enterprise.responsible=usergpinfoapplyContract //企业负责人
      this.enterprise.count=count//人数

    }).catch(e=>{
      console.log ( e )
    })
  },
  computed: {
   //验证列表数据是否有
   isListDisabled(){
     return !this.list.length
   }
  },

  onShow(){

  },
  methods: {
    //群团列表
    async  getList() {
      await this.getUserList({})
    },
    async getUserList(param){
      await this.getLists(getUsercommemberList,{pageSize:10,pageNo:this.pageNo,...param})
      this.list.map(item=>{
        this.$set(item,'isSelect',false)
      })
    },
    //清空时操作
    async onClear(){
      if(!this.enterprise.search.length){
        this.onRest()
        await this.getUserList({})
      }
    },
   //是否要勾选操作
    onSelectClick(item){
      item.isSelect=!item.isSelect
    },
    //搜索时判断
    async confirm(){
      this.onRest()
      if(Number.isFinite(+this.enterprise.search)){
        await this.getUserList({
          userPhone:+this.enterprise.search
        })
      } else {
        await this.getUserList({
          userPname:this.enterprise.search
        })
      }
    },
    //选中的进行删除
    onDel(){
      const list = this.list.filter(item=>item.isSelect)
      let str = ''
      if(!list.length){
         this.$api.msg('至少选择一条才可以进行删除')
        return
      }
      if(list.length===1){
        str+=list[0].id
      } else {
        let temp = []
        list.map(item=>{
          temp.push(item.id)
        })
        str = temp.join(',')
      }
      uni.showModal( {
        title : '温馨提示' ,
        content : `您已经选择了${list.length}条数据,是否要进行删除操作?` ,
        cancelText : '下次再说' ,
        confirmText : '删除' ,
        success : ( res ) => {
          if ( res.confirm ) {
            const data = `${str}`
            this.batchdeleteUsercommember(data)
          }
        } ,
      })
    },
    //删除数据
    batchdeleteUsercommember(data){
      batchdeleteUsercommember(data).then(res=>{
        const {code,message,result} = res
        if(code===200){
          this.$api.msg(result)
          this.onRest()
          this.getUserList({})
        } else {
          this.$api.msg(message)
        }
      }).catch(err=>{
        this.$api.msg(err.message)
      })
    },
  }
}
</script>
<style lang="scss" scoped>
@import"@/style/global-search"
</style>

<style lang="scss" scoped>
.corporateManagement{
  background: #F8F9FD;
  &-bgs{
    position: relative;
    image{
      width:100%;
      height:252rpx;
    }
    .corporateManagement-content{
      position: absolute;
      top: 46rpx;
      width: 100%;
      color: #fff;
      view{
        width: 100%;
        text-align: center;
        font-size: 32rpx;
        font-family: PingFang;
        font-weight: bold;
        color: #FFFFFF;
        &:last-child{
          font-size: 28rpx;
          font-weight: 500;
        }
      }
      .corporateManagement-content-more{
        padding-top: 38rpx;
      }
      .abc{
        font-size:20rpx;
      }
      .abc1{
        font-size:16rpx;
      }
      .num{
        padding-left: 42rpx;
      }
    }
  }
}
.corporateManagement-datas{
  width: 688rpx;
  background: #FFFFFF;
  box-shadow: 0px 0px 15rpx 2rpx rgba(68, 70, 74, 0.03);
  border-radius: 32rpx;
  margin: 0 auto;
  margin-top:29rpx;
  .search-data{
    .search-icon{
      z-index:11
    }
    .search-icon{
      left:36rpx;
    }
  }

}
.add{
  margin-top:59rpx;
  padding-bottom: 269rpx;
}
</style>
